import React, { Component } from 'react';
import { connect } from 'dva';
import { Link, routerRedux } from 'dva/router';
import {
    WhiteSpace,
    WingBlank,
    Flex,
    Icon,
    ListView,
    Button,
    Modal
} from 'antd-mobile';
import Moment from 'moment';
import NoLazyImg from "../../components/NoLazyImg/NoLazyImg";
import yellowJindu from "../../assets/svg/yellowJindu.svg";
import rightsvg from "../../assets/img/right.svg";
import {Toast} from "antd-mobile/lib/index";

class Group extends Component {
    constructor(props) {
        super(props);
        this.timer = null;
        const {goodsDetailInfo} = this.props;
        this.state = {
            d:"",
            showHour:"",
            m:"",
            s:"",
            now:goodsDetailInfo.nowTime
        }
    }
    componentDidMount(){
        setInterval(this.countTime, 1000, 1000)
        this.countTime()
    }
    startTime = (time)=>{
        let seconds = parseInt(time / 1000);
        // 总的小时数
        let h = Math.floor(seconds / 60 / 60);
        // 天数
        let d = parseInt(h / 24);
        // 显示的小时数
        let showHour = Math.floor(h - d * 24);
        let m = Math.floor((seconds - h * 60 * 60) / 60);
        let s = Math.floor((seconds - h * 60 * 60 - m * 60));
        if (seconds < 0) {
            h = '0';
            m = '00';
            s = '00';
            d = '00';
            showHour = '00';
        }
        return `${showHour}:${m}`
    }
    Time=(a)=>{
        let seconds = parseInt(a/1000);
        // 总的小时数
        let h = Math.floor(seconds / 60 / 60);
        return h
    }
    countTime=()=>{
        //获取当前时间
        const {goodsDetailInfo} = this.props;
        var now = this.state.now;
        //设置截止时间
        var end = goodsDetailInfo.endTime;
        var start = goodsDetailInfo.startTime;
        let seconds = start>now?parseInt((start - now) / 1000):parseInt((end - now) / 1000);
        // 总的小时数
        let h = Math.floor(seconds / 60 / 60);
        // 天数
        let d = parseInt(h / 24);
        // 显示的小时数
        let showHour = Math.floor(h - d * 24);
        let m = Math.floor((seconds - h * 60 * 60) / 60);
        let s = Math.floor((seconds - h * 60 * 60 - m * 60));
        if (seconds < 0) {
            m = '00';
            s = '00';
            d = '00';
            showHour = '00';
        }
        this.setState({
            d:d,
            showHour:showHour,
            m:m,
            s:s,
            now:now+1000
        })
    }
    render() {
        const {goodsDetailInfo} = this.props;
        const {startTime,endTime,collageGroup} = goodsDetailInfo
        const {d,showHour,m,s}=this.state;
        let a = "1111";
        return <div>
                <div style={{color:"#fff",height:"100%",paddingTop:".2rem",paddingBottom:".2rem"}}>
                    <Flex justify="between" >
                        <div style={{background:"linear-gradient(164deg,rgba(249,58,98,1),rgba(255,0,54,1))",width:"60%",padding:"0 .2rem",height:"1.5rem"}}>
                            <Flex justify="between" style={{width:"100%",marginTop:".2rem"}}>
                                <span style={{fontSize:".33rem"}}>拼团价</span>
                                <span style={{fontSize:".33rem"}}>已团{collageGroup.saleNum }件</span>
                            </Flex>
                            <Flex justify="between" style={{width:"100%"}}>
                                <div style={{marginTop:".25rem"}}>
                                    ¥<span style={{fontSize:".45rem",marginRight:".2rem"}}>{goodsDetailInfo.activityPrice }</span>
                                    <span style={{textDecoration:"line-through"}}>¥{goodsDetailInfo.storePrice}</span>
                                </div>
                                <div style={{fontSize:".35rem"}}>
                                    {collageGroup.joinNum }人成团
                                </div>
                            </Flex>

                        </div>
                        <Flex justify="center" style={{width:"40%",background:"#ffe4ea",textAlign:"center",height:"1.5rem"}}>
                            <div style={{width:"100%"}}>
                                <div style={{color:"#F93861",fontSize:".33rem",textAlign:"center",marginBottom:".1rem"}}>距结束仅剩</div>
                                <Flex justify="around" style={{color:"#FE0A3E"}}>
                                    <div style={{padding:".05rem",textAlign:"center",background:"#F93861",color:"#fff"}}>{d<10?"0"+d:d}</div> 天
                                    <div style={{padding:".05rem",textAlign:"center",background:"#F93861",color:"#fff"}}>{showHour<10?"0"+showHour:showHour}</div>时
                                    <div style={{padding:".05rem",textAlign:"center",background:"#F93861",color:"#fff"}}>{m<10?"0"+m:m}</div>分
                                    <div style={{padding:".05rem",textAlign:"center",background:"#F93861",color:"#fff"}}>{s<10?"0"+s:s}</div>秒
                                </Flex>
                            </div>
                        </Flex>
                    </Flex>
                </div>
        </div>

    }
}

export default connect(({ goodsDetail }) => ({ goodsDetail }))(Group);